<template>
  <view class="content">
    <view class="t-bg" style="background-image:url('https://lsz.lszbg.com/imgs/raffle/幸运抽奖bg1.png')">
      <view class="t-choujiang t-flex-row">
        <view :animation="rotate" class="t-zp" style="background-image:url('https://lsz.lszbg.com/imgs/raffle/jiangpin.png')"></view>
<!--        src="/src/static/luck/start.png"-->
        <image @click="start" class="t-start"></image>
      </view>
    </view>
    <!-- 规则部分 -->
    <view class="t-bottom">
      <view class="t-luck-wrapper">
        <view class="t-jh t-flex-row" style="background-image:url('/src/static/luck/anniu.png')">
          您还有{{ luckDrawTimes }}次机会
        </view>
      </view>
    </view>
    <!-- 抽奖结束弹窗 -->
    <kevy-mask :show="isShowAwd" @click="toConfirmAwd">
      <view class="t-full t-flex-row">
        <view class="t-tk-modal">
          <view class="t-tk-bg t-bg-full" style="background-image:url('/src/static/luck/tankuang.png')">
            <view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
<!--              <image src="/src/static/luck/xiexiecanyu.png"></image>-->
              <view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
            </view>
            <view v-if="drawIdx!=null && drawIdx > 0" class="t-tk-zj t-flex-col-s">
<!--              <image class="t-tk-zj-tip" src="/src/static/luck/wenzi.png"></image>-->
              <view class="t-tk-zj-desc t-flex-col">
<!--                <image class="t-zj-jp" :src="'/src/static/luck/'+drawIdx+'.png'"></image>-->
                <view class="t-zj-jp-desc">
                  {{ drawIdx == 5 ? "探亲礼包" : (drawIdx == 4 ? "加油卡" : (drawIdx == 3 ? "鸡腿" : (drawIdx == 2 ? "方便面" : "矿泉水"))) }}，同等价值{{ drawIdx == 5 ? "888" : (drawIdx == 4 ? "100" : (drawIdx == 3 ? "10" : (drawIdx == 2 ? "5" : "2"))) }}元现金已到账微信零钱
                </view>
              </view>
            </view>
          </view>
<!--          style="background-image:url('/src/static/luck/xiaoanniu.png')"-->
          <view @click="toConfirmAwd" class="t-tk-btn t-bg-full">
            {{ drawIdx > 0 ? "领取" : "确定" }}
          </view>
        </view>
      </view>
    </kevy-mask>
  </view>
</template>

<script>
import kevyMask from "./components/kevy-mask/kevy-mask.vue";

const animation = uni.createAnimation({
  duration: 4000,
  timingFunction: 'ease-out'
});
export default {
  components: {
    kevyMask
  },
  data() {
    return {
      rotate: 0, //度数-抽奖动画
      turning: false, //转盘是否正在转
      luckDrawTimes: 5, //抽奖机会，5代表可以抽5次
      isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
      drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
    }
  },
  onLoad() {

  },
  methods: {
    /**
     * 抽奖按钮点击
     */
    start() {
      let $ = this;
      let luckDrawTimes = $.luckDrawTimes;
      if (luckDrawTimes < 1) {
        uni.showToast({
          title: "抽奖机会已用完",
          icon: 'none'
        });
        return;
      }
      if (!$.turning) {
        $.turning = true;
        $.$nextTick(() => {
          //这里去请求服务器，生成中奖信息，其中awardIdx为中奖
          // uni.request({
          // })
          //以下为模拟请求返回数据，awardIdx从0开始，0代表谢谢参与，其他代表剩余的奖品，这里随机一个数（0-4之间）
          let awardIdx = Math.floor(Math.random() * 5);
          //计算旋转角度
          let rdm = $.computeRotateAward(awardIdx, 1);
          animation.rotate(rdm).step();
          $.rotate = animation.export();
          $.luckDrawTimes = $.luckDrawTimes <= 0 ? 0 : $.luckDrawTimes - 1;
          setTimeout(() => {
            let animation1 = uni.createAnimation({
              duration: 100,
              timingFunction: 'linear'
            });
            animation1.rotate(0).step();
            $.drawIdx = awardIdx;
            $.isShowAwd = true;
            $.$nextTick(() => {
              setTimeout(() => {
                $.rotate = animation1.export();
                $.turning = false;
              }, 1000);
            });
          }, 4350);
        });
      }
    },
    /**
     * 根据后台返回中奖奖品索引计算旋转角度
     * @param {*} idx 中奖奖品下标，从0开始
     * @param {*} type 1-计算角度 2-计算奖品
     */
    computeRotateAward(idx, type) {
      let award;
      if (idx === 5) {
        award = type === 1 ? 60 : "探亲礼包";
      } else if (idx === 4) {
        award = type === 1 ? 300 : "加油卡";
      } else if (idx === 3) {
        award = type === 1 ? 120 : "鸡腿";
      } else if (idx === 2) {
        award = type === 1 ? 240 : "方便面";
      } else if (idx === 1) {
        award = type === 1 ? 180 : "矿泉水";
      } else {
        award = type === 1 ? 0 : "谢谢参与";
      }
      //这里6代表6圈，你可以设置为你想要的
      return type === 1 ? (6 * 360 + award) : award;
    },

    /**
     * 确认奖品按钮点击事件
     */
    toConfirmAwd() {
      //这里中奖信息关闭弹框
      this.isShowAwd = false;
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  box-sizing: border-box;
}

.t-bg {
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow-x: hidden;
  height: 1608rpx;
  width: 750rpx;
  padding-top: 440rpx;
  /* margin-top: 40rpx; */
}

.t-choujiang {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
}

.t-zp {
  width: 530rpx;
  height: 530rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.t-start {
  width: 146rpx;
  height: 171rpx;
  position: absolute;
  z-index: 1;
  margin-top: -36rpx;
}

.t-jh {
  width: 456rpx;
  height: 120rpx;
  margin: 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 40rpx;
  color: #980100;
}

.t-fuhuo-text {
  font-size: 30rpx;
  color: #980100;
  width: 100%;
  height: 42rpx;
  margin-top: 14rpx;
}

.t-fh-fs {
  width: 580rpx;
  height: 100rpx;
  margin: 20rpx auto 0;
}

.t-fh-fs view {
  width: 250rpx;
  height: 100rpx;
  background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #FFFFFF;
}

.t-share {
  width: 250rpx;
  height: 100rpx;
  background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #FFFFFF;
}

.t-bottom {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  opacity: 0.99;
  background: #FDC469;
}

.t-luck-wrapper {
  position: relative;
  box-sizing: border-box;
  top: -219rpx;
}

.t-line {
  width: 580rpx;
  height: 1rpx;
  margin: 50rpx auto 0;
  background: #980100;
}

.t-r-title {
  font-size: 28rpx;
  color: #980100;
  height: 40rpx;
  margin: 30rpx auto 0;
  width: 585rpx;
}

.t-rule {
  margin: 10rpx auto 0;
  width: 585rpx;
}

.t-rule text {
  font-size: 28rpx;
  color: #980100;
  text-align: justify;
  display: block;
}

.t-tk-modal {
  width: 632rpx;
  height: 588rpx;
  position: relative;
  box-sizing: border-box;
}

.t-tk-bg {
  width: 100%;
  height: 528rpx;
  background-size: 100% 100%;
}

.t-tk-btn {
  width: 336rpx;
  height: 120rpx;
  position: absolute;
  bottom: 0;
  left: calc(50% - 168rpx);
  font-size: 40rpx;
  color: #980100;
  line-height: 120rpx;
  text-align: center;
  background-size: 100% 100%;
}

.t-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.t-flex-row-sb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


.t-flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.t-flex-col-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.t-xxcy image {
  width: 400rpx;
  height: 148rpx;
  margin-top: 139rpx;
}

.t-xxcy-ts {
  width: 510rpx;
  height: 100rpx;
  background: #FEF2CD;
  border-radius: 20rpx;
  font-size: 30rpx;
  color: #D93637;
  margin-top: 43rpx;
}

.t-tk-zj-tip {
  width: 347rpx;
  height: 106rpx;
  margin-top: 44rpx;
}

.t-tk-zj-desc {
  width: 474rpx;
  height: 281rpx;
  background: #FEF2CD;
  border-radius: 20rpx;
  margin-top: 2rpx;
}

.t-zj-jp {
  width: 264rpx;
  height: 157rpx;
}

.t-zj-jp-desc {
  font-size: 24rpx;
  color: #D93637;
  text-align: justify;
  width: 420rpx;
}
</style>